<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>欢迎光临Vue开发的收银系统__水果店</th>
      </tr>
      <tr>
        <td>苹果10￥/斤,折扣8折</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数<input
            type="text"
            value="jinshu"
            v-model.number="num"
          />
        </td>
      </tr>
      <tr>
        <td><button @click="btn">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单：<span>{{ jiezhang }}</span
          >￥元，折后价：<span>{{ zhekou }}</span
          >￥元，省了<span>{{ jiezhang - zhekou }}</span
          >￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      jiezhang: 0,
      zhekou: 0,
    };
  },
  methods: {
    btn() {
      this.jiezhang = this.num * 10;
      this.zhekou = this.num * 8;
    },
  },
};
</script>

<style scoped>
.tb {
  text-align: center;
}
</style>